<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>
      <div id="container">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide class="swiper-slide games">
            <img src="/static/jfsc/jfsc-1.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="/static/jfsc/jfsc-1.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="/static/jfsc/jfsc-1.png" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide games">
            <img src="/static/jfsc/jfsc-1.png" alt="">
          </swiper-slide>
      <p class="swiper-pagination" slot="pagination"></p>
      <p class="swiper-button-prev" slot="button-prev"></p>
      <p class="swiper-button-next" slot="button-next"></p>
      </swiper>
      </div>
      <div class="tupian1" v-for="item in arr">
        <div class="tup" v-for="item2 in item.arr2">
          <img :src="item2.url" alt="">
          <p class="wenzi">{{item2.tit}}</p>
          <p class="wenzi2">{{item2.tit2}}</p>
          <div class="jifen">
            <p>积分: <span class="ys">{{item2.tit3}}</span></p>
            <p>价值:{{item2.price}}</p>
          </div>
          <div class="duihuan">
           <p class="dh">立即兑换</p>
          </div>
        </div>

      </div>
      <Footer></Footer>


    </div>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
   import Footer from '../com/Footer';
  import Nav from '../com/Nav';
  import Nav2 from '../com/Nav2';
  export default {

    name: 'Jfsc',
    data () {

      return {
        arr:[
          {
            arr2:[
              {'url':'/static/jfsc/jfsc-2.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-3.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'600',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-4.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'700',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-5.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'}
            ],
          },
          {
            arr2:[
              {'url':'/static/jfsc/jfsc-2.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-3.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'600',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-4.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'700',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-5.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'}
            ],
          },
          {
            arr2:[
              {'url':'/static/jfsc/jfsc-2.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-3.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'600',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-4.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'700',price:'¥20.0'},
              {'url':'/static/jfsc/jfsc-5.png',tit:'新西兰佳沛黄金奇异果',tit2:'花蜜般的甘甜百吃不厌',tit3:'500',price:'¥20.0'}
            ],
          },
        ],

        swiperOption: {

          autoplay : {

            disableOnInteraction: false, //用户操作后是否禁止自动循环

            delay: 3000 //自自动循环时间

          }, //可选选项，自动滑动

          speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）

          loop:true, //循环切换

          grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

          // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。

          autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

          scrollbar: '.swiper-scrollbar',

          mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动

          observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper

          pagination: {

            el: '.swiper-pagination',

            // type : 'progressbar', //分页器形状

            clickable :true, //点击分页器的指示点分页器会控制Swiper切换

          },

          navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

          },

        },

        computed: {

          swiper() {

            return this.$refs.mySwiper.swiper

          }

        }

      }

    },
    components:{
      Nav,
      Nav2,
      Footer
    }

  }

</script>


<style scoped>
  img {
    width: 100%;
    height: auto;
  }
.tupian1{
  /*width: 1280px;*/
  height: 480px;
  margin-top: 20px;
  margin-left: 18px;
  display: flex;
  justify-content: space-between;
}
.tup{
  width: 304px;
  height: 480px;
  border: 1px solid #ccc;
  text-align: center;
  margin-right: 20px;
  background: white;
}
  .wenzi{
    font-size: 18px;
    color: #333;
  }
  .wenzi2{
    font-size: 14px;
    margin-top: 17px;
    color: #808080;
  }
  .jifen{
    display: flex;
    color: #808080;
    justify-content: space-around;
    margin-top: 21px;
  }
  .ys{
    color: #ff5757;
  }
  .duihuan{
    width: 150px;
    height: 36px;
    color: #fff;
    background: #f08200;
    margin-top: 21px;
    margin-left: 77px;
    border-radius: 15px;
  }
  .dh{
    color: #fff;
    line-height: 36px;
  }
</style>
